<template>
  <div class="page">
    <div class="top_div">
      <div class="input_div flex_ac" @click="$back() ">
        <van-icon class="ml6" name="arrow-left" size="26" color="#fff"/>
        <div class="nav_title">乡贤详情</div>
      </div>
      <img class="top_img" src="~@/assets/img/xiangxian/top_bg.png" alt="">
      <div class="info_div flex_ac flex_w">
        <div class="avatar flex_ac flex_center">
          <img src="~@/assets/img/xiangxian/top_bg.png" alt="">
        </div>
        <div class="info_right">
          <div class="flex_ac">
            <div class="info_name">丁帮富</div>
            <div class="add_div flex_ac">
              <div class="info_img flex_ac flex_center">
                <img src="~@/assets/img/xiangxian/add.png" alt="">
              </div>
              <div class="info_add">上海市</div>
            </div>
          </div>
          <div class="info_desc">上海大学教授/教授级高工</div>
          <div class="flex">
            <div class="label_item">深基坑</div>
            <div class="label_item">盾构法</div>
            <div class="label_item">模板脚手架</div>
          </div>
        </div>
        <div class="mt25 gz_text flex">
          <div class="mr40">300 关注</div>
          <div>540 粉丝</div>
        </div>
      </div>
    </div>
    <div class="box1">
      <div class="type_div">
        <div @click='type_index=1' class='type_item' :class="type_index==1?'type_active':''">
          <div class="flex_ac">资料</div>
        </div>
        <div @click='type_index=2' class='type_item' :class="type_index==2?'type_active':''">
          <div class="flex_ac">动态</div>
        </div>
        <div @click='type_index=3' class='type_item' :class="type_index==3?'type_active':''">
          <div class="flex_ac">人脉</div>
        </div>
      </div> 
      <div class="" v-if="type_index==1">
        <div class="h15"></div>
        <div class="xx_item">
          <div class="xx_t flex_ac">
            <img src="~@/assets/img/xiangxian/icon1.png" alt="">
            最高荣誉
          </div>
          <div class="xx_v mt20 mb35">
            <div>瞪羚企业</div>
            <img src="~@/assets/img/xiangxian/icon_bg.png" alt="">
          </div>
        </div>
        <div class="xx_item">
          <div class="xx_t flex_ac">
            <img src="~@/assets/img/xiangxian/icon2.png" alt="">
            成立年限
          </div>
          <div class="xx_v mt20 mb35">
            <div>16年</div>
            <img src="~@/assets/img/xiangxian/icon_bg.png" alt="">
          </div>
        </div>
        <div class="xx_item">
          <div class="xx_t flex_ac">
            <img src="~@/assets/img/xiangxian/icon3.png" alt="">
            融资轮次
          </div>
          <div class="xx_v mt20 mb35">
            <div>股权融资</div>
            <img src="~@/assets/img/xiangxian/icon_bg.png" alt="">
          </div>
        </div>
        <div class="xx_item">
          <div class="xx_t flex_ac">
            <img src="~@/assets/img/xiangxian/icon4.png" alt="">
            市场情况
          </div>
          <div class="xx_v mt20 mb35">
            <div>招标27个</div>
            <img src="~@/assets/img/xiangxian/icon_bg.png" alt="">
          </div>
        </div>
        <div class="xx_item">
          <div class="xx_t flex_ac">
            <img src="~@/assets/img/xiangxian/icon5.png" alt="">
            人员规模
          </div>
          <div class="xx_v mt20 mb35">
            <div>少于50人</div>
            <img src="~@/assets/img/xiangxian/icon_bg.png" alt="">
          </div>
        </div>
        <div class="xx_item">
          <div class="xx_t flex_ac">
            <img src="~@/assets/img/xiangxian/icon6.png" alt="">
            知识产权
          </div>
          <div class="xx_v mt20 mb35">
            <div>29</div>
            <img src="~@/assets/img/xiangxian/icon_bg.png" alt="">
          </div>
        </div>
        <div class="xx_title">
          公司信息
        </div>
        <div class="xx_item1 flex_ac">
          <img src="~@/assets/img/xiangxian/icon7.png" alt="">
          <div class="xx_item1_name">公司名称</div>
          <div class="xx_item1_desc">南京派格测控科技有限公司</div>
        </div>
        <div class="xx_item1 flex_ac">
          <img src="~@/assets/img/xiangxian/icon8.png" alt="">
          <div class="xx_item1_name">所在城市</div>
          <div class="xx_item1_desc">江苏省南京市浦口区</div>
        </div>
        <div class="xx_item1 flex_ac">
          <img src="~@/assets/img/xiangxian/icon9.png" alt="">
          <div class="xx_item1_name">公司官网</div>
          <div class="xx_item1_desc under">http://www.pgtec.cn</div>
        </div>
        <div class="xx_title">
          简介
        </div>
        <div class="content" v-html="content"></div>
      </div>

      <van-list
        v-if="type_index==2"
        v-model="isLoad"
        :finished="isfinish"
        finished-text="没有更多了"
        @load="getMore"
        class="ml5 mr5"
        >
        <waterfall
          :col="2"
          :data="list"
          :lazy-distance="1000"
          :gutterWidth="0"
        >
          <template>
            <div class="item_div" v-for="(item, index) in list" :key="index">
              <div class="item_img_div">
                <img class="item_img" v-if="!item.isErr&&item.thumb_y" @error="item.isErr=true;$forceUpdate()" :src="item.thumb_y" alt="加载错误" />
                <img class="item_img" v-else src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/bgbgbg.png" />
              </div>
              <div class="item_title">{{ item.park_name }}</div>
              <div class="item_desc text_line">
                {{ item.address }}
              </div>
            </div>
          </template>
        </waterfall>
      </van-list>

      <van-list
        v-if="type_index==3"
        v-model="isLoad1"
        :finished="isfinish1"
        finished-text="没有更多了"
        @load="getMore1">
        <div class="rm_item flex_ac flex_sb" v-for="i,k in list1">
          <img class="rm_avatar" src="~@/assets/img/xiangxian/top_bg.png" alt="">
          <div>
            <div class="rm_name">张家连</div>
            <div class="rm_desc">携程旅游部经理</div>
          </div>
          <img class="right mla" src="~@/assets/img/right.png" alt="">
        </div>
      </van-list>
    </div>
    <bottomDetail></bottomDetail>
  </div>
</template>
<script>
import bottomDetail from '@/components/bottomDetail.vue'
import {parklist} from '@/api/api.js'
export default {
  data() {
    return {
      type_index: 1,
      page: 1,
      total: 0,
      isfinish: false,
      isLoad: true,
      list: [],

      page1: 1,
      total1: 0,
      isfinish1: false,
      isLoad1: false,
      list1: [],
      
      content:'派格测控(PGtec®)，是一家致力于专业的测控产品开发、销售、集成和咨询服务的技术企业，专注于半导体测试及物联网领域。专业、稳定的派格团队头客户提供了优质的、完整的测控技术解决方案和服名包括:半导体测试系统成和咨询服务的技术企业，专注于半导体测试及物联网领域。专业、稳定的派格团队头客户提供了优质的、完整的测控技术解决方案和服名包括:半导体测试系统'

    }
  },
  components: {
    bottomDetail
  },
  created() {
    this.init()
    this.getList1()
  },
  methods: {
    init() {
      this.page = 1
      this.isfinish = false
      this.isLoad = true
      this.list = []
      this.getList()
    },
    getMore() {
      if (this.isfinish||this.list.length==0) {
        return
      }
      this.page++
      this.getList()
    },
    getList() {
      let data = {
        page: this.page,
        city_id:1
      }
      parklist({...data}).then(res => {
        this.isLoad = false
        this.list.push(...res.data.data)
        this.total = res.data.total
        if (this.list.length >= this.total) {
          this.isfinish = true
        }
      })
    },
    getMore1() {
      if (this.isfinish1||this.list1.length==0) {
        return
      }
      this.page1++
      this.getList1()
    },
    getList1() {
      let data = {
        page: this.page1,
        city_id:1
      }
      parklist({...data}).then(res => {
        this.isLoad1 = false
        this.list1.push(...res.data.data)
        this.total1 = res.data.total
        if (this.list1.length >= this.total1) {
          this.isfinish1 = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page{
  height: 100%;
  overflow: hidden;
}
.top_div{
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #F9EFDE 0%, rgba(255,254,253,0.6) 100%);
  .input_div{
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 10;
    color: #fff;
  }
  .top_img{
    width: 100%;
    height: 230px;
    display: block;
  }
  .title{
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: 500;
		font-size: 18px;
		color: #000;
  }

  .info_div{
    position: absolute;
    left: 10px;
    bottom: 25px;
    .avatar{
      width: 73px;
      height: 73px;
      border-radius: 50%;
      background: #fff8;
      margin-right: 13px;
      img{
        height: 65px;
        width: 65px;
        border-radius: 50%;
      }
    }
    .info_right{
      .info_name{
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
        margin-right: 18px;
      }
      .add_div{
        padding-right: 8px;
        height: 16px;
        border-radius: 8px;
        background: #fff;
      }
      .info_add{
        font-size: 11px;
        color: #EB7418;
      }
      .info_img{
        margin-left: 1px;
        height: 14px;
        width: 14px;
        background: #EB7418;
        border-radius: 7px;
        margin-right: 4px;
        img{
          width: 8px;
          height: 10px;
        }
      }
    }
  }
}
.info_desc{
  font-size: 14px;
  color: #FFFFFF;
  margin: 6px 0 6px;
}
.label_item{
  padding: 0 5px;
  height: 15px;
  line-height: 15px;
  background: rgba(0,0,0,0);
  border-radius: 3px;
  border: 1px solid #FFFFFF;
  font-size: 11px;
  color: #FFFFFF;
  margin-right: 5px
}
.gz_text{
  width: 100%;
  padding-left: 30px;
  font-size: 13px;
  color: #FFFFFF;
}

.box1{
  width: 100%;
  height: calc(100% - 285px);
  background: #FFFFFF;
  border-radius: 5px 5px 0 0;
  position: relative;
  top: -5px;
  overflow: auto;
}

.type_div{
	height:24px;
  padding: 15px 0 0 10px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
	.type_item{
		margin-right:20px;
		font-size:14px;
		color:#666;
		display: inline-block;
		position: relative;
		&:last-child{
			margin-right:20px;
		}
		image{
			width:20px;
			height:20px;
			margin-left: 2px;
		}
	}
	.type_active{
		font-weight: 700;
		font-size: 16px;
		div{
			color:#000 !important;
			position: relative;
			z-index: 20
		}
		&::after{
			content:' ';
		  position: absolute;
			bottom: -1px;
			left: 0;
		  width:100%;
		  height:5px;
			border-radius: 1px;
			background: linear-gradient(90deg,#0000 0%, #EB7418 100%);
		}
	}
}

.xx_item{
  width: 33.3%;
  display: inline-block;
  .xx_t{
    font-size: 12px;
    color: #666666;
    padding-left: 16px;
    img{
      width: 13px;
      height: 13px;
      margin-right: 6px;
    }
  }
  .xx_v{
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    width: 100%;
    position: relative;
    div{
      position: absolute;
      z-index: 10;
      width: 100%;
      height: 100%;
      text-align: center;
    }
    img{
      position: absolute;
      left: calc(50% - 31px);
      top: calc(50% - 14px);
      width: 62px;
      height: 28px;
    }
  }
}

.xx_title{
  margin-left: 10px;
  padding-left: 13px;
  position: relative;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  line-height: 16px;
  &::after{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 3px;
    height: 15px;
    border-radius: 1.5px;
    background: #FA8A26;
  }
}
.xx_item1{
  margin: 0 10px;
  height: 44px;
  border-bottom: 1px solid #F0F0F0;
  img{
    height: 16px;
    width: 16px;
    margin-right: 10px;
  }
  .xx_item1_name{
    font-size: 15px;
    color: #000000;
    margin-right: 25px;
  }
  .xx_item1_desc{
    font-size: 14px;
    color: #999999;
  }
  .under{
    color: #FA8A26;
    text-decoration-line: underline;
  }
}
.content{
  padding: 10px;
  font-size: 14px;
  color: #333333;
  line-height: 25px;
}

.item_div{
  background: #FFFFFF;
  box-shadow: 0px 3px 9px 2px rgba(68,142,238,0.13);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  margin: 10px 5px;
  .item_img_div{
    width: 100%;
    position: relative;
    .item_img{
      width: 100%;
      display: block;
      height: auto !important;
    }
  }
  .item_title{
    font-size: 14px;
    color: #333333;
    width: calc(100% - 20px);
    margin: 10px 10px 5px 10px;
  }
  .item_desc{
    width: calc(100% - 20px);
    font-size: 10px;
    color: #999999;
    margin: 0px 10px 10px 10px;
  }
}


.rm_item{
  margin: 10px;
  height: 80px;
  background: #FFFFFF;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.06), 0px -1px 5px 0px rgba(0,0,0,0.06);
  border-radius: 3px;
  padding:  0 15px;
  .rm_avatar{
    height: 40px;
    width: 40px;
    margin-right: 12px;
    border-radius: 50%;
  }
  .rm_name{
    font-size: 14px;
    color: #000000;
  }
  .rm_desc{
    margin-top: 10px;
    font-size: 11px;
    color: #666666;
  }
  .right{
    height: 14px;
    width: 8px;
  }
}
</style>